<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box {
        width: 800px;
        height: 20px;
        border-radius: 4px;
        margin: 100px auto;
        border: 2px solid green;
        position: relative;
    }

    #jinDuTiao {
        height: 20px;
        background: orange;
        border-radius: 4px;
        float: left;
    }

    #num {
        position: absolute;
        transform: translateY(-50%);
        top: 50%;
        left: 5px;
    }
</style>

<body>
    <div class="box">
        <div id="jinDuTiao" style="width: 0px;"></div>
        <span id="num">0%</span>
    </div>
</body>

</html>
<script>
    window.onload = function () {
        //会动的进度条，两个盒子，一个盒子用边框当变背景，另一个当进度条，用把定时器把进度条
        //的盒子的宽度增加 span显示背景盒子的宽度除以进度条盒子的宽度
        //用定时器去改变进度条宽度
        var timer = setInterval(function () {
            //宽度取整
            var style = parseInt(jinDuTiao.style.width);

            //定义自动改变的值
            var curStyle = style + 13;
            if (curStyle >= 800) {
                curStyle = 800;
                //清除定时器
                clearInterval(timer)
            }
            //加字符串加宽度
            jinDuTiao.style.width = curStyle + 'px'
            //给数字的元素添加left，定时器循环改变定位值
            num.style.left = curStyle + 2 + 'px';
            num.innerHTML = ((curStyle / 800) * 100).toFixed(2) + '%';
        }, 100)
    }
</script>